<template>
  <div class="Ticket">
    <div class="TicketInner">
      <div class="Head">
        <el-page-header @back="goBack" :content="pageMsg"> </el-page-header>
      </div>
      <div class="TicketBuyBox">
        <!-- 没有排片 -->
        <span v-if="isopen === false">影院还没有添加排片</span>
        <!-- 有场次 -->
        <div class="TicketBuy" v-if="isopen === true">
          <div
            class="Session"
            v-for="(session, index) in Sessions"
            :key="index"
          >
            <span>{{ session.name }}</span>
            <span>{{ session.date }} {{ session.startTime }}</span>
            <el-tag>{{ session.type }}放映</el-tag>
            <span>￥{{ session.price }}</span>
            <el-button
              type="danger"
              round
              @click="gotoChoose(session.id, film.id)"
              >选座购票</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArrangement } from "@/api/user.js";
export default {
  name: "FilmTicket",
  data() {
    return {
      pageMsg: "特惠购票",
      isopen: true,
      Sessions: [
        {
          name: "XXXXXX",
          date: "01-12",
          startTime: "",
          type: "2D",
          price: 30,
        },
        {
          name: "XXXXXX",
          date: "01-12",
          startTime: "",
          type: "3D",
          price: 30,
        },
      ],
      film: {},
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    gotoChoose(id, fid) {
      this.$router.push({
        path: "/index/ChooseSeat",
        query: {
          id,
        },
      });
    },
    getArr: function () {
      getArrangement(this.Id).then((res) => {
        this.Sessions = res.data.arrangements;
        this.film = res.data.film;
      });
    },
  },
  mounted() {
    this.Id = this.$route.query.id;
    this.$emit("getFilmId", this.Id);
    this.getArr();
  },
};
</script>

<style lang="less" scoped>
.Ticket {
  width: 100%;
  .TicketInner {
    width: 1200px;
    margin: 0 auto;
    margin-top: 100px;
    .TicketBuyBox {
      .Session {
        height: 100px;
        position: relative;
        margin-top: 10px;
        span {
          position: absolute;
        }
        span:nth-child(1) {
          top: 10px;
          font-size: 15px;
        }
        span:nth-child(2) {
          top: 30px;
          font-size: 13px;
          color: #aaaaaa;
        }
        .el-tag {
          top: 50px;
          width: 80px;
          text-align: center;
          border-color: rgba(118, 194, 255, 1);
        }
        span:nth-child(4) {
          top: 40px;
          right: 150px;
        }
        .el-button {
          position: absolute;
          top: 30px;
          right: 10px;
          border: 1px solid black;
        }
      }
    }
    .TicketBuyBox > span:nth-child(1) {
      color: red;
      font-size: 28px;
      font-weight: bold;
    }
  }
}
</style>